今天先講解大量的 v-model v-bind v-if-else v-show v-for

v-model

各位同學，如此一來，我們輸入的字將會存入data的test中，並顯示於{{test}} !

<div>
    <input type="text" v-model="test">
    <br>
    <p>v-model的值:{{test}}</p>
</div>

data:()=>({
    test:""
}),

v-bind

和 v-model不同的地方就是 data 裡面的值不能改

<p>v-bind:{{test}}</p>
data:()=>({
    test:"123"
}),

v-if-else

判斷 v-if 的 error 是false 則不顯示，否之！

<error v-if="error" />
data: () => ({
    error: false,
}),

v-show

判斷 v-show 的 error 是false 則不顯示，否之！

<error v-show="error" />
data: () => ({
    error: false,
}),

v-for

item 代表用於迭代的元素，使用 item.id 或 item.name 可帶出屬性。其中第二個參數 index 是索引值 (流水號)。

<div id="app">
  <ul>
    <li v-for="(item, index) in list">
      index: ${ index }, name: ${ item.name }
    </li>
  </ul>
</div>

data: () =>({
list: [
  { id: '123456789', name: '選項 1' },
  { id: '234567890', name: '選項 2' },
  { id: '345678901', name: '選項 3' },
],
})

參考

• https://hackmd.io/@j1hcIoQVRfSxmcOVqF8C6g/Hyypq20ew
• https://hackmd.io/@j1hcIoQVRfSxmcOVqF8C6g/HJVt5tCev
• https://cythilya.github.io/2017/04/27/vue-list-rendering/